<template>
<div class="my-swiper">
  <swiper
    :autoplay="swiper_options.autoplay"
    :loop="swiper_options.loop"
    :speed="swiper_options.speed"
    :spaceBetween="swiper_options.spaceBetween"
    :coverflowEffect="swiper_options.coverflowEffect"
    :centeredSlides="swiper_options.centeredSlides"
    :slidesPerView="swiper_options.slidesPerView"
    :initialSlide="swiper_options.initialSlide"
    class="swiper"
    effect="coverflow">
    <swiper-slide v-for="item in list" :key="item" class="avatar-content">
      <div :style="{backgroundImage: `url(${item.avatar})`}" class="avatar">        
        <div class="nickname">{{ item.username || '**匿名**' }}</div>
      </div>
    </swiper-slide>    
</swiper>
</div>

</template>
<script>
import { reactive } from "vue";
// 使用swiper的compositon API
import SwiperCore, { Autoplay, Pagination, EffectCoverflow, Navigation } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';
SwiperCore.use([Autoplay, Pagination, EffectCoverflow, Navigation]);
export default {
  name: "MySwiper",
  components: {
    Swiper,
    SwiperSlide,
  },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  setup() {
    // swiper相关配置属性放在swiper_options这个变量里
    let swiper_options = reactive({
      initialSlide: 2,
      autoplay: {
        disableOnInteraction: false, // 鼠标滑动后继续自动播放
        delay: 5000, //4秒切换一次
      },
      speed: 500, //切换过渡速度
      loop: true,
      slidesPerView: 2.5, //解决最后一张切换到第一张中间的空白
      centeredSlides: true, //设置slide居中
      spaceBetween: 0,
      coverflowEffect: {
        rotate: 0, //slide做3d旋转时Y轴的旋转角度。默认50。
        stretch: 21, //每个slide之间的拉伸值（距离），越大slide靠得越紧。 默认0。
        depth: 350, //slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。
        modifier: 1.1, //depth和rotate和stretch的倍率，相当于            depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。
        slideShadows: false, //开启slide阴影。默认 true。
      },
      // navigation: {
      //   nextElRef: ".swiper-button-next",
      //   prevElRef: ".swiper-button-prev",
      // },
      // pagination: {
      //   clickable: true,
      // },
      on: {
        click: function() {
          console.log('11111')
          // wx.previewImage({urls: []})
        }
      }
    });
    // 将swiper_options返回给模板中的swiper组件使用
    return { swiper_options };
  },
};
</script>

<style lang="less" scoped>
.swiper {
  overflow: unset;
}
.my-swiper {
  padding:30px 33px 0 33px;
	width:100%;
	height:200px;
  .avatar-content {    
    .avatar {
      border: 2px solid #f3d7c6;
      border-radius: 8px;
      width: 7.75rem; 
      height: 8.9375rem;
      background-size: contain;
      background-repeat: no-repeat;
      position: relative;
      .nickname {
        font-size: 16px;
        position: absolute;
        z-index: 0;
        bottom: 0;
        background: linear-gradient(210deg, #D74F19 0%, #AD270B 100%);
        box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.5);
        border-radius: 0px 0px 8px 8px;
        color: #FFB975;
        left: 0;
        right: 0;
      }
    }
  }
}
</style>

